<template>
	<view :class="themeName">
		<view class="center-box p-50">
			<view class="font-size-40 bold">{{$zhTran('添加用户')}}</view>
			<view>
				<u-form :model="form" ref="uForm" :error-type="['toast']">
					<u-form-item label-position="top" :label="$zhTran('账号')" prop="account">
						<u-input v-model="form.account" :placeholder="$zhTran('请填写账号')" type="text" />
					</u-form-item>
					<u-form-item label-position="top" :label="$zhTran('密码')" prop="password">
						<u-input v-model="form.password" :placeholder="$zhTran('请填写密码')" type="password" />
					</u-form-item>
				</u-form>
			</view>
		</view>

		<!-- 功能按钮组 -->
		<view class="functions">
			<view class="bind" @click="bindUser">{{$zhTran('绑定')}}</view>
		</view>
	</view>
</template>

<script type="text/javascript">
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		apiBindUser,
	} from "@/api/user_multi_switch"
	import {
		currentPage,
	} from "@/utils/tools";
	import Cache from "@/utils/cache";
	export default {
		props: {},
		data() {
			return {
				form: {
					account: '',
					password: ''
				},
				rules: {
					account: [{
						required: true,
						message: this.$zhTran('请填写账号'),
						trigger: ['change', 'blur'],
					}],
					password: [{
						required: true,
						message: this.$zhTran('请填写密码'),
						trigger: ['change', 'blur'],
					}],
				},
				eventChannel: null,
			}
		},
		methods: {
			bindUser() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						apiBindUser(this.form)
							.then((res) => {
								if (getCurrentPages().length > 1) {
									this.$Router.back(1, {
										success: () => {
											const {
												onLoad,
												options
											} = currentPage();
											// 刷新上一个页面
											onLoad && onLoad(options);

											setTimeout(() => {
												this.eventChannel.emit(
													"relervanceUser", {});
											}, 500);
										},
									});
								} else if (Cache.get(BACK_URL)) {
									this.$Router.replace(Cache.get(BACK_URL));
								} else {
									this.$Router.replaceAll("/pages/index/index");
								}
							})
					} else {
						console.log('验证失败');
					}
				});
			},
		},
		computed: {},
		onShow() {
			this.$refs.uForm.setRules(this.rules);
		},

		onLoad() {
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}
			const eventChannel = this.getOpenerEventChannel()
			this.eventChannel = eventChannel
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.functions {
		position: fixed;
		z-index: 9999999;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		height: calc(120rpx + constant(safe-area-inset-bottom));
		height: calc(120rpx + env(safe-area-inset-bottom));
		padding: 0 50rpx constant(safe-area-inset-bottom) 50rpx;
		padding: 0 50rpx env(safe-area-inset-bottom) 50rpx;

		.bind {
			width: 100%;
			background-color: rgba(43, 117, 235, 1);
			padding: 20rpx 0;
			color: #fff;
			text-align: center;
			font-size: 32rpx;
			border-radius: 10rpx;
		}

	}
</style>